import React from 'react'
import { Router, useHistory, Switch, Route, useLocation, StaticRouter } from 'umi'
import { TabBar, NavBar } from 'antd-mobile'

import {
    AppOutline,
    MessageOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'
import styles from "./index.less"
import Film from '@/pages/Film/_layout'
import Cinames from '@/pages/Cinames'
import Center from '@/pages/Center'
const Bottom = () => {
    const history = useHistory()
    const location = useLocation()
    const { pathname } = location

    const setRouteActive = (value: string) => {
        history.push(value)
    }

    const tabs = [
        {
            key: '/film',
            title: '电影',
            icon: <AppOutline />,
        },
        {
            key: '/cinames',
            title: '影院',
            icon: <UnorderedListOutline />,
        },

        {
            key: '/center',
            title: '我的',
            icon: <UserOutline />,
        },
    ]

    return (
        <TabBar
            safeArea
            activeKey={"/" + pathname.split("/")[1]}
            onChange={value => setRouteActive(value)}
        >
            {tabs.map(item => (
                <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
        </TabBar>
    )
}

export default (props: any) => {
    return (
        <div className={styles.app}>
            <div className={styles.body}>
                {props.children}
            </div>
            <div className={styles.bottom}>
                <Bottom />
            </div>
        </div>
    )
}
